<div class="toolbar">
    <h4>商品分类管理</h4>
    <div class="m-btn">
        <button (click)="addType()" tsBtn color="success">新增分类</button>
        <!-- <button tsBtn color="warning">确认排序</button> -->
        <button (click)="loadDatas()" class="btn btn-white">
            <i class="fa fa-refresh fa-fw"></i>刷新列表
        </button>
    </div>
</div>
<div class="p-2">
    <div class="card mt-2" tsCollapses>
        <div class="card-body">
            <table class="table">
                <thead>
                    <tr class="bg-light">
                        <th scope="col">#</th>
                        <th scope="col">分类名称</th>
                        <th scope="col">创建时间</th>
                        <th scope="col">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <ng-container *ngFor="let item of list;index as i">
                        <tr class="border-0">
                            <td>{{i+1}}</td>
                            <td>
                                <input type="text" [disabled]="item.isSaved" [class.form-control]="!item.isSaved" [class.form-control-plaintext]="item.isSaved" [(ngModel)]="item.mainType.goodsTypeTitle">
                            </td>
                            <td>{{item.mainType.createdAt}}</td>
                            <td>
                                <span (click)="addChildType(item)" class="btn-icon btn-icon-primary">
                                    <i class="iconfont icon-add-circle"></i>
                                </span>
                                <span (click)="deleteType(item,i)" class="btn-icon btn-icon-danger">
                                    <i class="iconfont icon-delete"></i>
                                </span>
                                <span *ngIf="item.isSaved" (click)="item.setEdit()" class="btn-icon btn-icon-info">
                                    <i class="iconfont icon-form"></i>
                                </span>
                                <span *ngIf="!item.isSaved" (click)="confirmSave(item)" class="btn-icon btn-icon-success">
                                    <i class="iconfont icon-save"></i>
                                </span>
                            </td>
                        </tr>
                        <tr class="border-0">
                            <td class="pt-0 pb-0 border-0"></td>
                            <td colspan="3" class="pt-0 pb-0 border-0 pl-2">
                                <div tsCollapse [open]="!item.isSaved" class="form-inline">
                                    <div *ngFor="let child of item.childTypes;index as j" class="input-group ml-1 mb-3" style="width:10rem;">
                                        <input type="text" class="form-control" [(ngModel)]="child.goodsTypeTitle">
                                        <div class="input-group-append">
                                            <button (click)="deleteChildType(item,j)" class="btn btn-white" type="button">
                                                <i class="iconfont icon-delete"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </ng-container>
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- <pre>{{list|json}}</pre> -->